<template>
  <div class="space-size-analyze">
    <a-card title="图库大小分析">
      <v-chart :option="options" style="height: 400px; width: 80%" :loading="loading" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { listSpaceSizeAnalyzeUsingPost } from '@/api/spaceAnalysisController.ts'
import VChart from 'vue-echarts'
import 'echarts'

interface Props {
  queryPublic?: boolean
  queryAll?: boolean
  spaceId?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  queryPublic: false,
  queryAll: false,
})

// 获取使用情况
const dataList = ref<API.SpaceSizeAnalyzeResponse[]>([])

const loading = ref(false)
const getDataList = async () => {
  loading.value = true

  const res = await listSpaceSizeAnalyzeUsingPost({
    spaceId: props.spaceId as number,
    queryPublic: props.queryPublic,
    queryAll: props.queryAll,
  })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data as []
  }
  loading.value = false
}

// 定义饼图
const options = computed(() => {
  const pieData = dataList.value.map((item) => ({
    name: item.sizeRange,
    value: item.totalCount,
  }))

  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      top: 'bottom',
    },
    series: [
      {
        name: '图片大小',
        type: 'pie',
        radius: '50%',
        data: pieData,
      },
    ],
  }
})


onMounted(() => {
  getDataList()
})
</script>

<style scoped lang="scss"></style>
